import React, { useState } from 'react';
import Navbar from '../components/navbar';
import MenuAvatar from '@/components/menuAvatar';
import MyContent from '../components/myContent';

const MainPage = () => {
  const [menuHeight, setMenuHeight] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
      <div style={{ backgroundColor: '#ececec' }}>
        <MenuAvatar onHeight={setMenuHeight} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
        <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
          <Navbar />
        </div>
        <div style={{ flex: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
          <MyContent />
        </div>
      </div>
    </div>
  );
};

export default MainPage;







// // 登录注册成功后进入的主页
// // MainPage.js
// import React, { useState } from 'react';
// import Navbar from '../components/navbar';
// import MenuAvatar from '@/components/menuAvatar';
// import MyContent from '../components/myContent'; // 假设这是您的内容组件
// import StockChart1 from '@/components/StockChart1';
// import ShowStockDetail from '@/components/ShowStockDetail';
// import RealTimeChart from '@/components/RealTimeChart';
// import StockChart2 from '@/components/StockChart2';

// const MainPage = () => {
//   const [menuHeight, setMenuHeight] = useState(0);

//   return (
//     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//       {/* MenuAvatar 始终在顶部 */}
//       <div style={{ backgroundColor: '#ececec' }}>
//         <MenuAvatar onHeight={setMenuHeight} />
//       </div>
//       {/* 下面的区域分为左侧 Navbar 和右侧 Content */}
//       <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//         {/* Navbar 在左侧，固定宽度 */}
//         <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
//           <Navbar />
//         </div>
//         {/* Content 占据剩余空间 */}
//         <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//           <MyContent />
//         </div>
//       </div>
//     </div>
//   );

// };

// export default MainPage;

